<template>
  <div class="choice">
    <h2 class="title">{{ title }}</h2>
    <div class="choice_wrap">
      <div
        v-for="(item, index) in list"
        :key="item"
        class="choice_con"
        @click="selected = index"
        :class="`${selected == index ? 'active' : ''}`"
      >
        {{ item }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Choice",
  props: {
    title: String,
    list: Array,
  },
  data() {
    return {
      selected: 0,
    };
  },
  methods: {
    active() {
      return this.list[this.selected];
    },
  },
};
</script>

<style lang="scss" scoped>
.choice {
  // border: 1px red solid;
  padding: 5.3333vw 0;
  .title {
    font-size: 4.8vw;
    font-weight: 800;
    margin-bottom: 5.3333vw;
  }
  .choice_wrap {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .choice_con {
      flex-shrink: 0;
      width: 20%;
      padding: 2.1333vw 1.3333vw;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 1.3333vw;
      font-size: 3.2vw;
    }
    .active {
      background: #666fe6;
      color: #fff;
    }
  }
}
</style>